<html>

<head>
  <title>光源</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <script src="./js/three.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 1、创建场景
    var scene = new THREE.Scene();

    //创建一个球体几何对象
    // var geometry = new THREE.BoxGeometry(100, 100, 100);
    // ==============================================================================================================
    // 材质对象
    // var material = new THREE.MeshBasicMaterial({ color: 'pink' });
    // 网格模型对象Mesh
    // var mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh);//网格模型添加到场景中

    // 光源:
    /* 
      环境光: AmbientLight
      平行光: DirectionalLight
      点光源：PointLight
      聚光灯光源：SpotLight
      基类Light：属性：颜色：.color 、 强度：.intensity
    */

    // ==============================================================================================================
    // 环境光AmbientLight
    /* 
      环境光是没有特定方向的光源，主要是均匀整体改变Threejs物体表面的明暗效果，
      这一点和具有方向的光源不同，比如点光源可以让物体表面不同区域明暗程度不同。
    */
    //环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
    // var ambient = new THREE.AmbientLight(0xfffffff);
    // scene.add(ambient);//环境光对象添加到scene场景中

    // ==============================================================================================================
    // 点光源PointLight
    /* 
      点光源就像生活中的白炽灯，光线沿着发光核心向外发散，同一平面的不同位置与点光源光线入射角是不同的，点光源照射下，同一个平面不同区域是呈现出不同的明暗效果。
      和环境光不同，环境光不需要设置光源位置，而点光源需要设置位置属性.position，光源位置不同，物体表面被照亮的面不同，远近不同因为衰减明暗程度不同。
    */
    // var pointLight = new THREE.PointLight(0xff0000);
    // pointLight.position.set(10, 10, 10);
    // scene.add(pointLight);

    // ==============================================================================================================
    // 平行光DirectionalLight
    // 平行光
    // var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    // directionalLight.position.set(80, 100, 50);
    // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
    // directionalLight.target = mesh;
    // scene.add(directionalLight);
    // 平行光如果不设置.position和.target属性，光线默认从上往下照射，也就是可以认为(0,1,0)和(0,0,0)两个坐标确定的光线方向

    // ==============================================================================================================
    // 聚光源SpotLight
    // 聚光源可以认为是一个沿着特定方会逐渐发散的光源，照射范围在三维空间中构成一个圆锥体。通过属性.angle可以设置聚光源发散角度，聚光源照射方向设置和平行光光源一样是通过位置.position和目标.target两个属性来实现。
    // 聚光光源
    // var spotLight = new THREE.SpotLight(0xffffff);
    // 设置聚光光源位置
    // spotLight.position.set(100, 100, 800);
    // 聚光灯光源指向网格模型mesh
    // spotLight.target = mesh;
    // 设置聚光光源发散角度
    // spotLight.angle = Math.PI / 6
    // scene.add(spotLight);//光对象添加到scene场景中


    // ==============================================================================================================
    // 光源辅助对象
    // Threejs提供了一些光源辅助对象，就像AxesHelper可视化显示三维坐标轴一样显示光源对象,通过这些辅助对象可以方便调试代码，查看位置、方向。
    /* 
      辅助对象	              构造函数名
    聚光源辅助对象	        SpotLightHelper
    点光源辅助对象	        PointLightHelper
    平行光光源辅助对象	    DirectionalLightHelper
    */

    // 聚光源辅助对象
    // var spotLightHelper = new THREE.SpotLightHelper(spotLight, 'red');
    // scene.add(spotLightHelper);

    // 点光源辅助对象
    // var sphereSize = 1;
    // var pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
    // scene.add(pointLightHelper);

    // 平行光光源辅助对象
    // var helper = new THREE.DirectionalLightHelper(directionalLight, 50);
    // scene.add(helper);

    // ==============================================================================================================
    // 光照计算算法
    /* 
      Three.js渲染的时候光照计算还是比较复杂的，这里不进行深入介绍，只给大家说下光源颜色和网格模型Mesh颜色相乘的知识，如果你有兴趣可以学习计算机图形学或者WebGL教程。
      Threejs在渲染的时候网格模型材质的颜色值mesh.material.color和光源的颜色值light.color会进行相乘，简单说就是RGB三个分量分别相乘。
      平行光漫反射简单数学模型：漫反射光的颜色 = 网格模型材质颜色值 x 光线颜色 x 光线入射角余弦值
      漫反射数学模型RGB分量表示：(R2,G2,B2) = (R1,G1,B1) x (R0,G0,B0) x cosθ
      */
    // R2 = R1 * R0 * cosθ
    // G2 = G1 * G0 * cosθ
    // B2 = B1 * B0 * cosθ

    // 颜色相乘测试
    // 网格模型材质设置为白色
    var geometry = new THREE.BoxGeometry(100, 100, 100); //
    var material = new THREE.MeshLambertMaterial({
      color:  'red'
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    //环境光   环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
    var ambient = new THREE.AmbientLight(0x440000);
    scene.add(ambient);//环境光对象添加到scene场景中
    //点光源
    var point = new THREE.PointLight(0xff0000);
    //设置点光源位置  光源对象和模型对象的position属性一样是Vector3对象
    //PointLight的基类是Light  Light的基类是Object3D  点光源对象继承Object3D对象的位置属性position
    point.position.set(400, 200, 300);
    scene.add(point);




    // 3、光源设置：
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    // var ambient = new THREE.AmbientLight('#444444');
    // scene.add(ambient);

    //点光源  
    // var point = new THREE.PointLight(0xffffff);
    // point.position.set(400, 200, 300);
    // scene.add(point);


    // 4、添加相机
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.z = 5;
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);


    // 5、创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement);

    // 6、执行渲染操作
    var animate = function () {
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.01;
    };
    animate();
    var controls = new THREE.OrbitControls(camera);//创建控件对象
  </script>
</body>

</html>